<template>
  <Modal
      :mask-closable="false"
      title="生产计划单打印"
      width="900px"
      v-model="printVisible"
      :footer-hide="true"
      class="print-modal"
      @on-visible-change="handleVisibleChange"
  >
    <section id="productionPlanPrint" class="print-content">
      <div class="a4-container" v-for="(item, index) in printData.loop" :key="index">
        <div class="a4-page">
          <!-- 标题 -->
          <h1 class="print-title">生产计划单</h1>

          <!-- 上半部分：字段和二维码 -->
          <div class="header-section">
            <div class="table-section" style="display: flex">
              <div>
                <!--                <span style="font-size: 12px;font-weight: bold;">工单组号: {{ item.groupItem }}</span>-->
                <table class="production-table">
                  <thead>
                  <tr>
                    <th style="width: 120px">客户</th>
                    <th>材料</th>
                    <th>初始设备编号</th>
                    <th>初始模具编号</th>
                    <!--                    <th  colspan="2" >二维码</th>-->
                  </tr>
                  </thead>
                  <tbody>
                  <!-- 第一组 -->
                  <tr>
                    <td rowspan="1">{{ printData.info.remarks3 || '--' }}</td>
                    <td rowspan="1">{{ printData.info.remarks2 || '--' }}</td>
                    <td rowspan="1">{{ item.deviceCode || '--' }}</td>
                    <td rowspan="1">{{ item.moldCode || '--' }}</td>
                    <!--                    <td colspan="2" rowspan="2" style="padding: 5px; text-align: center;">-->
                    <!--                      <div id="headerQrcode" ref="headerQrcode" style="display: inline-block;"></div>-->
                    <!--                    </td>-->
                  </tr>

                  <!--                  <tr></tr>-->
                  </tbody>
                </table>
                <table class="production-table" style="margin-bottom: 0; border-bottom: none">
                  <tbody>
                  <tr>
                    <td style="width: 120px;background-color: #f5f5f5;font-weight: bold;border-top:none;">
                      工单组号
                    </td>
                    <td colspan="3" style="border-left: none;border-top:none;">
                      {{ item.groupItem || '--' }}
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 120px;background-color: #f5f5f5;font-weight: bold;">
                      油品分类
                    </td>
                    <td colspan="3" style="border-left: none;">
                      {{ printData.info.oilClassification || '--' }}
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 120px;background-color: #f5f5f5;font-weight: bold;">
                      备注
                    </td>
                    <td colspan="3" style="border-left: none;">
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <div class="header-qrcode">
                <div id="headerQrcode" ref="headerQrcode"></div>
              </div>
            </div>
            <div class="table-section" style="margin-top: 5px">
              <table class="production-table">
                <thead>
                <tr>
                  <th style="width: 120px">工单号</th>
                  <th>产品名称</th>
                  <th>产品编码</th>
                  <th>图号规格</th>
                  <th style="width: 150px">计划数量</th>
                </tr>
                </thead>
                <tbody>
                <!-- 第一组 -->
                <tr v-for="(items,indexs) of deviceOrders[index]" :key="indexs">
                  <td rowspan="1">{{ items.workCode }}</td>
                  <td rowspan="1">{{ items.materialName }}</td>
                  <td rowspan="1">{{ items.materialCode }}</td>
                  <td rowspan="1">{{ items.customMaterialCode }}</td>
                  <td rowspan="1">{{ items.planProduceQuantity }}</td>
                </tr>
                </tbody>
              </table>


            </div>

          </div>

          <!-- 下半部分：表格 -->
          <div class="table-section">
            <table class="production-table">
              <thead>
                <tr>
                  <th>日期</th>
                  <th>班次</th>
                  <th>设备号</th>
                  <th style="width: 120px">模具/工装号</th>
                  <th>产品</th>
                  <th>客户料号</th>
                  <th>数量</th>
                  <th>备注</th>
                  <th>姓名</th>
                </tr>
              </thead>
              <tbody>
              <tr v-for="index in 22">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              </tbody>
            </table>
          </div>

          <!-- 下半部分：表格 -->
          <!--          <div class="table-section" style="display: none">-->
          <!--            <table class="production-table">-->
          <!--              <thead>-->
          <!--              <tr>-->
          <!--                <th rowspan="2">日期</th>-->
          <!--                <th rowspan="2">冲床号</th>-->
          <!--                <th rowspan="2">姓名</th>-->
          <!--                <th rowspan="2">班次</th>-->
          <!--                <th>定/转子</th>-->
          <!--                <th rowspan="2">产品代号</th>-->
          <!--                <th rowspan="2">数量(套)</th>-->
          <!--                <th rowspan="2">备注</th>-->
          <!--              </tr>-->
          <!--              </thead>-->
          <!--              <tbody>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr>-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr v-if="deviceOrders[index].length !=3">-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr v-if="deviceOrders[index].length !=3">-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              &lt;!&ndash; 第一组 &ndash;&gt;-->
          <!--              <tr v-if="deviceOrders[index].length <3">-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr v-if="deviceOrders[index].length < 3">-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr v-if="deviceOrders[index].length == 1">-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td rowspan="2"></td>-->
          <!--                <td>转子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              <tr v-if="deviceOrders[index].length == 1">-->
          <!--                <td>定子</td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--                <td rowspan="1"></td>-->
          <!--              </tr>-->
          <!--              </tbody>-->
          <!--            </table>-->
          <!--          </div>-->
        </div>
      </div>
    </section>

    <Row style="margin: 20px">
      <Col align="center">
        <Button v-print="printConfig" type="primary">打印</Button>
      </Col>
    </Row>
  </Modal>
</template>

<script>
import QRCode from 'qrcodejs2'
import request from '@/axios/axios.js'

export default {
  name: "ProductionPlanPrint",
  data() {
    return {
      printVisible: false,
      deviceData: [], // 存储每个工单的设备数据
      deviceOrders: [], // 存储设备订单号
      printConfig: {
        id: 'productionPlanPrint',
        popTitle: '', // 打印配置标题
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />',
        preview: false, // 不开启打印预览
        zIndex: 20002,
        extraCss: `
          @page {
            size: A5 portrait;
            margin: 0;
            /* 隐藏页眉页脚 */
            marks: none;
            margin-top: 0;
            margin-bottom: 0;
          }
          @media print {
          * {
              box-sizing: border-box;
            }
            body {
              margin: 0;
              padding: 0;
              background: white !important;
              -webkit-print-color-adjust: exact !important;
              print-color-adjust: exact !important;
            }
            /* 隐藏浏览器默认的页眉页脚 */
            @page :header { display: none; }
            @page :footer { display: none; }
            /* 隐藏模态框本身 */
            .print-modal {
              display: none !important;
            }
            /* A4纸样式 */
            .a4-container {
              width: 100% !important;
              height: auto !important;
              padding: 0 !important;
              margin: 0 !important;
              page-break-after: auto !important;
            }
            .a4-page {

              width: 148mm !important;
              padding:0mm; /* 减小内边距 */
              box-shadow: none !important;
            }
              .a4-page > * {
              margin: 0 !important;
              padding: 0 !important;
            }
            /* 表格样式 */
            .production-table {
              border-collapse: collapse !important;
              width: 100% !important;
              max-width: 100% !important;
              table-layout: fixed !important;
            }
            .production-table th,
            .production-table td {
              border: 1px solid #000 !important;
              padding: 4px 6px !important;
              font-size: 12px !important;
              height: 24px !important;
            }
            /* 调整字段行间距 */
            .field-row {
              margin-bottom: 6px !important;
            }
            /* 调整整体布局 */
            .header-section {
              margin-bottom: 10px !important;
              padding-bottom: 10px !important;
            }
            .table-section {
            }
          }
        `
      },
      printData: {
        info: {},
        loop: []
      }
    }
  },
  methods: {
    async show(data) {
      this.printData = {
        info: data.info || {},
        loop: data.loop || []
      };
      this.printVisible = true;

      // 初始化设备数据和订单号数组
      this.deviceData = new Array(this.printData.loop.length).fill([]);
      this.deviceOrders = new Array(this.printData.loop.length).fill('');

      // 查询设备数据
      await this.fetchDeviceData();
      this.$nextTick(() => {
        this.createQrCode();
      });
    },
    async fetchDeviceData() {
      const promises = this.printData.loop.map(async (item, index) => {
        try {
          const params = {
            pageSize: 10,
            pageNum: 1,
            deviceId: item.deviceId,
            workCode: item.workCode
          };

          const res = await request({
            method: 'get',
            url: '/dms/mobile/selectWorkOrderByWorkCode',
            params: params
          });

          if (res.code === 200 && res.data && res.data.records) {
            // 更新设备数据
            // this.$set(this.deviceData, index, res.data.records);

            // 生成设备订单号
            const orderNumbers = res.data.records
                .filter(record => record.workCode !== item.workCode)

            orderNumbers.unshift(this.printData.loop[index])
            console.log(orderNumbers, 'orderNumbers')
            this.$set(this.deviceOrders, index, orderNumbers);
            console.log(this.deviceOrders[index])
          }
        } catch (error) {
          console.error('查询设备数据失败:', error);
        }
      });

      await Promise.all(promises);
    },
    createQrCode() {
      if (this.$refs.headerQrcode && this.printData.loop.length > 0) {
        const firstItem = this.printData.loop[0];
        const text = firstItem.workCode || '--';

        const qrcodeContainers = document.querySelectorAll('#headerQrcode');
        qrcodeContainers.forEach(container => {
          container.innerHTML = '';
        });

        if (qrcodeContainers.length > 0) {
          setTimeout(() => {
            new QRCode(qrcodeContainers[0], {
              text: text,
              width: 90,
              height: 90,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
            });
          }, 100);
        }
      }
    },
    handleVisibleChange(visible) {
      if (!visible) {
        const qrcodeContainers = document.querySelectorAll('#headerQrcode');
        qrcodeContainers.forEach(container => {
          container.innerHTML = '';
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.print-modal {
  ::v-deep .ivu-modal-body {
    padding: 0;
    overflow: auto;
    max-height: calc(100vh - 200px);

  }
}

.print-content {
  padding: 16px;
  //max-height: calc(100vh - 270px);
  //overflow: auto;

}

.a4-container {
  width: 210mm;
  min-height: 210mm;
  margin: 0 auto;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

  .a4-page {
    padding: 5mm;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.print-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  //margin-bottom: 20px;
  padding-bottom: 10px;
}

.header-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 5px;
  //padding-bottom: 15px;

  .header-fields {
    flex: 1;
    padding-right: 20px;
  }

  .header-qrcode {
    width: 150px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 10px;
  }
}

.field-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
  flex-wrap: wrap;

  .field-label {
    width: 80px;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    flex-shrink: 0;
  }

  .field-value {
    min-width: 120px;
    padding-bottom: 3px;
    margin-right: 20px;
    flex: 1;
  }
}

.table-section {
  flex: 1;
  overflow: hidden;

  .production-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      table-layout: fixed;

      th, td {
        border: 1px solid #000;
        padding: 6px 8px;
        text-align: center;
        height: 30px;
        min-width: 60px;
      }
      th:nth-child(9),
      td:nth-child(9) {
        min-width: 80px;
        word-break: break-all;
      }

    th {
      background-color: #f5f5f5;
      font-weight: bold;
    }

    td {
      vertical-align: middle;
    }
  }
}
</style>